<template>
	<view>
		<u-picker :show="statusShow" :columns="columns" @cancel="statusShow = false" 
			:closeOnClickOverlay="true" :itemHeight="60" @confirm="statusSearch">
		</u-picker>

		<view style="padding: 15px;">
			<u-row>
				<u-col :span="11">
					<u--input
						    placeholder="search"
							v-model="keyword"
							:clearable="true"
							@clear="clearSearch"
							style="margin-right: 5px;"
					></u--input>
				</u-col>
				<u-col :span="1">
					<u-icon name="search" color="#d81e06" size="60" style=" margin: 0 auto;" @click="search"></u-icon>
				</u-col>
			</u-row>
			
		</view>
		
		
		<u-row customStyle="padding: 0px 15px 10px 0px">
			<u-col span="3">
				<view class="demo-layout bg-purple-light" style="height: 100%;margin: 0 auto;">	
					<u-tag :text="status == ''? '筛选': status" plain @click="statusShow = true" type="error"> </u-tag>
				</view>	
			</u-col>
			<u-col span="9">
				<view class="demo-layout bg-purple-light"></view>
			</u-col>
		</u-row>
		
		<view style="padding: 10px ;min-height: 345px;">
			<u-grid
					:border="false"
					col="2"
			>
				<u-grid-item
						v-for="i in activityList"
						:key="i.eventId"
				>
					<view class="item" @click="goActivityDetail(i.eventId)">
						<view class="imgBk" :style="{backgroundImage: 'url(' + i.eventImgUrl + ')'}">
							
						</view>
						<view class="itemContent">
							<view style="font-size: 12px;font-weight: 200;color: darkorange;">{{i.startTime}}~{{i.endTime}}</view>
							<view class="line1" style="font-size: 12px;font-weight: 600;margin-bottom: 2px;">{{i.title}}</view>
							<view class="line2" style="font-size: 12px;font-weight: 200;height: 32px;">{{i.description}}</view>
							<view v-if="i.status == '已通过'" style="font-size: 12px;font-weight: 200;color: green">{{i.status}}</view>
							<view v-if="i.status == '报名中'" style="font-size: 12px;font-weight: 200;color: purple">{{i.status}}</view>
							<view v-if="i.status == '已结束'" style="font-size: 12px;font-weight: 200;color: red">{{i.status}}</view>
							<view v-if="i.status == '进行中'" style="font-size: 12px;font-weight: 200;color: blue">{{i.status}}</view>
							<view v-if="i.status == '未通过'" style="font-size: 12px;font-weight: 200;color: aqua">{{i.status}}</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid><br><br><br>
		</view>
		
		<tab-bar :currentPage="1"></tab-bar>
	</view>
</template>

<script>
import { getActivityApi, getActivityByStatus } from '../../../utils/homePage'
	export default{
		data(){
			return{
				activityList: [],
				statusShow: false,
				keyword:'',
				status: '',
				columns: [
					 ['全部','已通过', '报名中', '已结束','进行中']
				],
			}
		},
		methods: {
			formatDate2(time){
				return time.slice(0, 10)
			},
			search(){
				console.log('查询了')
				let that = this
				this.status = ''
				getActivityApi(this.keyword,this.status).then(res => {
					if(res.code == 0){
						that.activityList = res.data
						that.activityList.forEach(e => {
							e.startTime = that.formatDate2(e.startTime)
							e.endTime = that.formatDate2(e.endTime)
						})
					}
				})
			},
			statusSearch(e){
				// console.log('状态查询',e.value[0])
				if( e.value[0] == '全部'){
					this.status = ''
				}else{
					this.status = e.value[0]
				}
				this.statusShow = false
				let that = this
				getActivityByStatus(1,20,this.status).then(res => {
					if(res.code == 0){
						that.activityList = res.data.records
						that.activityList.forEach(e => {
							e.startTime = that.formatDate2(e.startTime)
							e.endTime = that.formatDate2(e.endTime)
						})
					}
				})
			},
			clearSearch(){
				let that = this
				getActivityApi('','').then(res => {
					if(res.code == 0){
						that.activityList = res.data
						that.activityList.forEach(e => {
							e.startTime = that.formatDate2(e.startTime)
							e.endTime = that.formatDate2(e.endTime)
						})
					}
				})
			},
			goActivityDetail(id){
				console.log(id)
				uni.navigateTo({
					url:`/pages/view/activity/activityDetail?id=${id}`
				})
			}
		},
		onShow() {
			let that = this
			getActivityApi('','').then(res => {
				// console.log(res.data)
				if(res.code == 0){
					that.activityList = res.data
					that.activityList.forEach(e => {
						e.startTime = that.formatDate2(e.startTime)
						e.endTime = that.formatDate2(e.endTime)
					})
				}
			})
		}
	}
</script>

<style scoped>
	.title{
		font-weight: 700;
		font-size: 40rpx;
		margin-left: 10px;
	}
	.imgBk{
		width: 100%;height: 80px;
		background-size: 100% 100%;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
	}
	.line1{
		display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
	}
	.line2{
		display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
	}
	.item{
		width: 100%;margin: 0 auto;width: 87%;margin-bottom: 20px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
		border-radius: 7px;
	}
	.itemContent{
		padding: 6px;
		height: 80px;
	}
</style>